var svgNS = "http://www.w3.org/2000/svg";

var listnum = 0;

function textList(id, parentNode, functionToCall, text, x, y, width, height)
{
	this.init(id, parentNode, functionToCall, text, x, y, width, height);
}

textList.prototype.init = function(id, parentNode, functionToCall, text, x, y, width, height)
{
	this.id = id; //the id where all new content is appended to
	this.parentNode = parentNode; //the id or node reference of the parent group where the textList can be appended
	this.functionToCall = functionToCall; //function to be called if textList was pressed
	this.text = text; //default value to be filled in when textList is created
	this.x = x; //left of textList rectangle
	this.y = y; //top of textList rectangle
	this.width = width; //textList rectangle width
	this.height = height; //textList rectangle height
	this.displayedText = [];
	this.selected = -1;
	this.highlighted = -1;
	this.topItem = 0;
	this.createList(); //method to initialize textList

	this.downx = 0;
	this.downy =  0;
	this.downTop = -1;
}

textList.prototype.createList = function()
{
	listnum++;
	var result = this.testParent();
	if (result)
	{
		this.clipPath = document.createElementNS(svgNS,"clipPath");
		this.clipPath.setAttributeNS(null,"id","myClipPath"+listnum);
		this.clipPath.setAttributeNS(null,"clip-rule","evenodd");
		this.path = document.createElementNS(svgNS,"rect");
		this.path.setAttributeNS(null,"x",this.x);
		this.path.setAttributeNS(null,"y",this.y);
		this.path.setAttributeNS(null,"width",this.width);
		this.path.setAttributeNS(null,"height",this.height);
		this.clipPath.appendChild(this.path);
		this.parentGroup.appendChild(this.clipPath);

		this.highlightedBox = document.createElementNS(svgNS,"rect");
		this.highlightedBox.setAttributeNS(null,"clip-path","url(#myClipPath"+listnum+")");
		this.highlightedBox.setAttributeNS(null,"x",this.x);
		this.highlightedBox.setAttributeNS(null,"y",this.y + ((this.highlighted-1) * 25) - 10);
		this.highlightedBox.setAttributeNS(null,"width",this.width);
		this.highlightedBox.setAttributeNS(null,"height",25);
		this.highlightedBox.setAttributeNS(null,"style","fill:url(#highlightedColor)");
		this.parentGroup.appendChild(this.highlightedBox);

		for (var i = 0; i < this.text.length; i++)
		{
			this.displayedText[i] = document.createElementNS(svgNS,"text");
			this.displayedText[i].setAttributeNS(null,"clip-path","url(#myClipPath"+listnum+")");
			this.displayedText[i].setAttributeNS(null,"x",this.x);
			this.displayedText[i].setAttributeNS(null,"y",this.y + (25 * (i+1)));
			this.displayedText[i].setAttributeNS(null,"font-family","Verdana");
			this.displayedText[i].setAttributeNS(null,"font-size",16);
			if (i == this.selected)
			{
				this.displayedText[i].setAttributeNS(null,"style","fill:url(#selectedColor)");
			}
			else
			{
				this.displayedText[i].setAttributeNS(null,"fill","#ffffff");
			}
			var textNode = document.createTextNode(this.text[i]);
			this.displayedText[i].appendChild(textNode);
			this.parentGroup.appendChild(this.displayedText[i]);
		}
	}
	else
	{
		alert("could not create or reference 'parentNode' of textList with id '"+this.id+"'");
	}
}

//test if parent group exists
textList.prototype.testParent = function()
{
    //test if of type object
    var nodeValid = false;
	if (this.parentGroup != null)
	{
		this.parentNode.removeChild(this.parentGroup);
		this.parentGroup = null;
	}
    this.parentGroup = document.createElementNS(svgNS,"g");
	this.parentGroup.addEventListener("click",this,false);
	this.parentGroup.addEventListener("mousedown",this,false);
//	this.parentGroup.addEventListener('dblclick',this,false);
    if (typeof(this.parentNode) == "object")
    {
    	if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g")
    	{
    		this.parentNode.appendChild(this.parentGroup);
    		nodeValid = true;
    	}
    }
    else if (typeof(this.parentNode) == "string")
    {
    	//first test if textList group exists
    	if (!document.getElementById(this.parentNode))
    	{
        	this.parentGroup.setAttributeNS(null,"id",this.parentNode);
        	document.documentElement.appendChild(this.parentGroup);
        	nodeValid = true;
   		}
   		else
   		{
       		document.getElementById(this.parentNode).appendChild(this.parentGroup);
       		nodeValid = true;
   		}
   	}
   	return nodeValid;
}

//event handling
textList.prototype.handleEvent = function(evt)
{
	if (evt.type == "mousedown")
	{
//		this.togglePressed("pressed");
		this.downx = evt.clientX;
		this.downy = evt.clientY;
		this.downTop = this.topItem;
		document.documentElement.addEventListener("mouseup",this,false);
		document.documentElement.addEventListener("mousemove",this,false);
	}
	if ((evt.type == "mousemove") && (this.downTop != -1))
	{
		var offset = Math.floor((this.downy - evt.clientY) / 25) + 1;
		this.setTopItem(this.downTop + offset);
		this.refresh();
	}
	if (evt.type == "mouseup")
	{
		if (Math.abs(this.downy - evt.clientY) > 5)
		{
			var offset = Math.floor((this.downy - evt.clientY) / 25) + 1;
			this.setTopItem(this.downTop + offset);
			this.refresh();
			this.downy = 0;
			this.downTop = -1;
		}
		document.documentElement.removeEventListener("mouseup",this,false);
		document.documentElement.removeEventListener("mousemove",this,false);
	}
	if (evt.type == "click")
	{
		var ypos = evt.clientY - this.y + (this.topItem * 25) +10;
		this.setSelectedItem(Math.floor(ypos/25) );
		//for some strange reasons I could not forward the evt object here ;-(, the code below using a literal is a workaround
		//attention: only some of the evt properties are forwarded here, you can add more, if you need them
		var timerEvt = {x:evt.clientX,y:evt.clientY,type:evt.type,detail:evt.detail,timeStamp:evt.timeStamp}
		this.functionToCall(Math.floor(ypos/25));
	}
}

textList.prototype.setTopItem = function(num)
{
	if (num > 0)
	{
		this.topItem = num-1;
		this.refresh();
	}
}

textList.prototype.setSelectedItem = function(num)
{
	this.selected = num-1;
	this.refresh();
}

textList.prototype.setHighlightedItem = function(num)
{
	this.highlighted = num-1;
	this.refresh();
}

textList.prototype.setHidden = function(val)
{
	if (val)
	{
		this.parentGroup.setAttribute('visibility', 'hidden');
	}
	else
	{
		this.parentGroup.setAttribute('visibility', 'visible');
	}
}

textList.prototype.refresh = function()
{
	var offset = this.topItem * 25;
	this.path.setAttributeNS(null,"x",this.x);
	this.highlightedBox.setAttributeNS(null,"x",this.x);
	this.highlightedBox.setAttributeNS(null,"x",this.x);
	this.highlightedBox.setAttributeNS(null,"y",this.y + ((this.highlighted) * 25) + 5 - offset);
	for (var i = 0; i < this.text.length; i++)
	{
		this.displayedText[i].setAttributeNS(null,"x",this.x);
		this.displayedText[i].setAttributeNS(null,"y",this.y + (25 * (i+1)) - offset);
		if (i == this.selected)
		{
			this.displayedText[i].setAttributeNS(null,"style","fill:url(#selectedColor)");
		}
		else
		{
			this.displayedText[i].setAttributeNS(null,"style","fill:#ffffff");
		}
	}
}